<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0CB66F',
                        danger: '#F53F3F',
                        neutral: {
                            100: '#F2F3F5',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 10px 30px -5px rgba(0, 0, 0, 0.1)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-blue {
                background: linear-gradient(135deg, #165DFF 0%, #0CB66F 100%);
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-300;
            }
            .btn-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
            }
        }
    </style>
</head>
<body class="bg-neutral-100 font-inter min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-md">
        <!-- 登录卡片 -->
        <div class="bg-white rounded-2xl shadow-card overflow-hidden transform hover:shadow-xl transition-all duration-500">
            <!-- 顶部装饰条 -->
            <div class="h-2 bg-gradient-blue"></div>

            <!-- 卡片内容 -->
            <div class="p-8">
                <!-- 标题 -->
                <div class="text-center mb-8">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-700 mb-2">欢迎回来</h2>
                    <p class="text-neutral-400">请登录您的账户</p>
                    <p class="tip" style="color : red">
                        {% for item in get_flashed_messages() %}
                            {{ item }}
                        {% endfor %}
                    </p>
                </div>

                <!-- 错误提示 -->
                <div id="error-message" class="mb-6 hidden">
                    <div class="bg-danger/10 border border-danger/20 text-danger px-4 py-3 rounded-lg flex items-center">
                        <i class="fa fa-exclamation-circle mr-2"></i>
                        <span id="error-text">用户名或密码错误</span>
                    </div>
                </div>

                <!-- 登录表单 -->
                <form id="login-form" action="/login" method="post" class="space-y-5">
                    <!-- 用户名输入 -->
                    <div>
                        <label for="username" class="block text-sm font-medium text-neutral-600 mb-1">用户名</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                <i class="fa fa-user"></i>
                            </span>
                            <input type="text" id="username" name="username" class="w-full pl-10 pr-4 py-3 border border-neutral-200 rounded-lg input-focus" placeholder="请输入用户名" required>
                        </div>
                    </div>

                    <!-- 密码输入 -->
                    <div>
                        <div class="flex justify-between items-center mb-1">
                            <label for="password" class="block text-sm font-medium text-neutral-600">密码</label>
                            <a href="#" class="text-sm text-primary hover:text-primary/80 transition-colors">忘记密码?</a>
                        </div>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                <i class="fa fa-lock"></i>
                            </span>
                            <input type="password" id="password" name="password" class="w-full pl-10 pr-10 py-3 border border-neutral-200 rounded-lg input-focus" placeholder="请输入密码" required>
                            <button type="button" id="toggle-password" class="absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 hover:text-neutral-600 transition-colors">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>

                    <!-- 记住我 -->
                    <div class="flex items-center">
                        <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-primary border-neutral-300 rounded focus:ring-primary">
                        <label for="remember-me" class="ml-2 block text-sm text-neutral-600">记住我的登录状态</label>
                    </div>

                    <!-- 登录按钮 -->
                    <button type="submit" class="w-full bg-primary text-white py-3 px-4 rounded-lg font-medium btn-hover flex items-center justify-center">
                        <span>登录</span>
                        <i class="fa fa-arrow-right ml-2"></i>
                    </button>
                </form>

                <!-- 分隔线 -->
                <div class="relative flex items-center my-6">
                    <div class="flex-grow border-t border-neutral-200"></div>
                </div>

                <!-- 注册链接 -->
                <div class="text-center text-sm text-neutral-500">
                    还没有账户? <a href="{{ url_for('redirect_register') }}" class="text-primary font-medium hover:underline">立即注册</a>
                </div>
            </div>
        </div>

        <!-- 页脚 -->
        <div class="text-center text-xs text-neutral-400 mt-6">
            <p>© 2025 版权所有</p>
        </div>
    </div>

    <script>
        // 密码显示/隐藏切换
        document.getElementById('toggle-password').addEventListener('click', function() {
            const passwordInput = document.getElementById('password');
            const icon = this.querySelector('i');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            } else {
                passwordInput.type = 'password';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            }
        });


        // 添加简单的动画效果
        document.addEventListener('DOMContentLoaded', function() {
            // 页面加载动画
            const loginCard = document.querySelector('.shadow-card');
            loginCard.classList.add('animate-fadeIn');

            // 输入框聚焦效果
            const inputs = document.querySelectorAll('input');
            inputs.forEach(input => {
                input.addEventListener('focus', function() {
                    this.parentElement.classList.add('scale-105');
                    this.parentElement.style.transition = 'all 0.3s ease';
                });

                input.addEventListener('blur', function() {
                    this.parentElement.classList.remove('scale-105');
                });
            });
        });
    </script>
</body>
</html>
